<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../css/mui.css" rel="stylesheet" />
    <link rel="stylesheet" href="../src/iconfont/iconfont.css">
    <style>
        /* {
            touch-action: pan-y;
        }
        
        @font-face {
            font-family: "iconfont";
            src: url('iconfont.eot?t=1526519665018');
            src: url('iconfont.eot?t=1526519665018#iefix') format('embedded-opentype'), 
            url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url('iconfont.ttf?t=1526519665018') format('truetype'), 
            url('iconfont.svg?t=1526519665018#iconfont') format('svg');

        }
        
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .icon-dictionary:before {
            content: "\e6ea";
        }
        
        .icon-mail-:before {
            content: "\e6fd";
        }
        
        .icon-msg-:before {
            content: "\e717";
        }
        
        .icon-me-:before {
            content: "\e72a";
        }
        
        .icon-home-fill:before {
            content: "\e741";
        }
        
        .icon-videocam:before {
            content: "\e301";
        }
        
        .icon-zuowu-guzi:before {
            content: "\e635";
        }
        
        .icon-boke:before {
            content: "\e689";
        }
        
        .icon-tongjishiduan:before {
            content: "\e69a";
        }
        
        .icon-xiangmuxuqiu:before {
            content: "\e69c";
        }
        
        .icon-xuanzeneirong:before {
            content: "\e69f";
        }*/
        
        .mui-active {
            color: #ffc629!important;
        }
        
        .mui-bar-tab .mui-tab-item {
            display: table-cell;
            overflow: hidden;
            width: 1%;
            height: 50px;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: green;
        }
        
        .icon {
            width: 0.5rem;
            height: 0.5rem;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            color: #9b9b9b;
        }
        
        #navtype {
            position: absolute;
            display: block;
            top: 0.05rem;
            left: 0.9rem;
            color: #ff0000;
            border: solid 1px #ff0000;
            border-radius: 100%;
            background: #FF3F40;
            color: #fff;
            width: 18px;
            height: 18px;
            font-size: 10px;
            text-align: center!important;
            line-height: 18px;
            z-index: 99999999;
            display: none;
        }
        
        #navtypea {
            position: absolute;
            display: block;
            top: 0.1rem;
            left: 0.8rem;
            color: #ff0000;
            border: solid 1px #ff0000;
            border-radius: 100%;
            background: #FF3F40;
            color: #fff;
            width: 10px;
            height: 10px;
            font-size: 10px;
            text-align: center!important;
            line-height: 18px;
            z-index: 99999999;
            display: none;
        }
        
        #navtypeb {
            position: absolute;
            display: block;
            top: 0.1rem;
            right: 0.4rem;
            color: #ff0000;
            border: solid 1px #ff0000;
            border-radius: 100%;
            background: #FF3F40;
            color: #fff;
            width: 10px;
            height: 10px;
            font-size: 10px;
            text-align: center!important;
            line-height: 18px;
            z-index: 99999999;
            display: none;
        }
        
        #moments {
            position: relative;
        }
       	
    </style>
</head>

<body>
    <div>
        <nav class="mui-bar mui-bar-tab" id="tabnav">
            <a class="mui-tab-item" id="moments">
                <span class="mui-icon iconfont icon-emojifill"></span>
                <span class="mui-tab-label">童圈</span>
                <span id="navtype">{{item.count}}</span>
                <span id="navtypea"></span>
            </a>
            <a class="mui-tab-item" id="services">
                <span class="mui-icon iconfont icon-commentfill"></span>
                <span class="mui-tab-label">小秘书</span>
            </a>
            <a class="mui-tab-item  mui-active" id="schools">
                <span class="mui-icon iconfont icon-writefill"></span>
                <span class="mui-tab-label">课外</span>
            </a>
            <a class="mui-tab-item" id="monitor">
                <span class="mui-icon iconfont icon-video-fill"></span>
                <!--<span class="mui-icon iconfont icon-mail-"></span>-->
                <span class="mui-tab-label">视频</span>
            </a>
            <a class="mui-tab-item" id="pcenter">
                <span class="mui-icon iconfont icon-peoplefill"></span>
                <span class="mui-tab-label">我的</span>
                <span id="navtypeb"></span>
            </a>
        </nav>
    </div>
    <div class="loadingbox"></div>
    <script src="../js/mui.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/app.js"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" charset="UTF-8">
        //各个子页单独处理返回事件，这里return false，避免退至登录页
        mui.back = function(event) {
            return false;
        };
        mui.init();

        var state;
        var uid;
        var aniShow = {};
        var subpages = ['./moments/index.html', './services/index.html', './schools/index.html', './monitor/index.html', './pcenter/index.html']; 
        var subpagesid = ['moments', 'services', 'schools', 'monitor', 'pcenter']; 
        var subpage_style = {
            top: '0px',
            bottom: '51px'
        };

        mui.plusReady(function() {
            var wv = plus.webview.currentWebview();
            // 关闭侧滑返回功能  
            wv.setStyle({
                'popGesture': 'none'
            });
            state = app.getState();
            uid = state.userid;
            memberToken = state.memberToken;
            
           
            //设置只支持竖屏幕显示
            plus.screen.lockOrientation("portrait-primary");
            //心跳包，用于检测重复登录
            var data = {
                uid: state.userid,
                imei: plus.device.imei //设备标识
            };
            /*setInterval(function() {
                mui.post(Apiurl+'index/heartbeat', data, function(data) {
                    //如果账号已被占用，退出到登陆界面
                    if (data.status == "200") {
                        //注销账号信息
                        app.setState({});

                        // 获取所有Webview窗口
                        var curr = plus.webview.currentWebview();
                        var wvs = plus.webview.all();
                        for (var i = 0, len = wvs.length; i < len; i++) {
                            //关闭除当前页面外的其他页面
                            if (wvs[i].getURL() == curr.getURL())
                                continue;
                            plus.webview.close(wvs[i]);
                        }
                        //打开login页面后再关闭当前页面，以免出现页面空白的情况
                        plus.webview.open('../login.html');
                        curr.close();
                    }
                }, 'json');
            }, 20000);*/
            //加载各个子页
            var self = plus.webview.currentWebview();
            for (var i = 0; i < 5; i++) {
                var temp = {};
                var sub = plus.webview.create(subpages[i], subpagesid[i], subpage_style);

                if (i == 2) {
                    //首页
                    temp[subpagesid[i]] = "true";
                    console.log(JSON.stringify(temp));
                    mui.extend(aniShow, temp);
                } else {
                    //其他页
                    sub.hide();
                }
                self.append(sub);
            }
            //获取未读消息数量
            mui.post(Apiurl+'index/pinglun', {
                    uid: state.userid,
                }, function(data) {
                    navtype.item = data;
                    if (data.count > 99) data.count = 99;
                    if (data.count > 0) {
                        document.getElementById('navtype').style.display = "block";
                    }
                    if (data.un == 1) {
                        document.getElementById('navtypea').style.display = "block";
                    } else if (data.un == 0) {
                        document.getElementById('navtypea').style.display = "none";
                    }
                }, 'json')
                //获取通知公告消息数量
            mui.post(Apiurl+'index/tong', {
                uid: state.userid,
            }, function(data) {
                if (data.un == 1) {
                    document.getElementById('navtypeb').style.display = "block";
                }
            }, 'json')
        });
        //设置菜单栏高亮 
        var activeTab = subpagesid[2];
        //添加bar点击事件监听
        mui('.mui-bar-tab').on('tap', '.mui-tab-item', function() {

            var targetTab = this.getAttribute('id');

            if (targetTab == activeTab) {
                return;
            }

            if (mui.os.ios || aniShow[targetTab]) {
                plus.webview.show(targetTab);
            } else {
                //否则，使用fade-in动画，且保存变量
                var temp = {};
                temp[targetTab] = "true";
                mui.extend(aniShow, temp);
                plus.webview.show(targetTab, "fade-in", 300);
            }
            //隐藏当前;
            plus.webview.hide(activeTab); 
            //更改当前活跃的选项卡
            activeTab = targetTab;
            var parentPage = plus.webview.getWebviewById('moments');
            mui.fire(parentPage, 'refreshvideo', {

            });

        });

        //未读消息对象
        var navtype = new Vue({
            el: '#navtype',
            data: {
                item: []
            },
        });
        document.getElementById('moments').addEventListener('tap', function() {
            document.getElementById('navtypea').style.display = "none";
        })
        document.getElementById('pcenter').addEventListener('tap', function() {
                document.getElementById('navtypeb').style.display = "none";
            })
            //点击我的未读消息后，清除底部数字提示
        window.addEventListener('refreshmymsgnum', function(event) {
            document.getElementById('navtype').style.display = "none";

        });
    </script>
</body>

</html>